<!--
 * @Date: 2025-12-01 16:05:13
 * @Description: 饼图
 * @LastEditTime: 2025-12-02 00:19:32
-->
<template>
  <div class="charts" ref="chartRef"></div>
</template>

<script>
import echarts from 'echarts';
let myCharts = null;
export default {
  name: 'PieChart',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    myCharts = echarts.init(this.$refs.chartRef);
  },
  watch: {
    list: {
      handler(newVal) {
        if (!newVal || newVal.length === 0) return;
        this.$nextTick(() => {
          myCharts.setOption(this.getOptions(newVal));
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getOptions(data) {
      let xData = [];
      let yData1 = [];
      let total = 0;

      if (data && data.length > 0) {
        data.forEach((item) => {
          xData.push(item.goodsName);
          yData1.push(item.goodsAmount);
          total += item.goodsAmount;
        });
      } else {
        return;
      }
      let scale = 1;
      const chartPieColors = [
        [
          {
            offset: 0,
            color: 'rgba(199, 41, 63, 1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(255, 112, 56, 1)', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: 'rgba(112, 86, 255, 1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(43, 83, 255, 1)', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: 'rgba(0, 244, 181, 1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(0, 229, 186, 1)', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: 'rgba(244, 244, 244, 1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(168, 168, 168, 1)', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#FFB058', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#C56625', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#4ACC88', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#27A657', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#2C989E', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#27BCC9', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#8A98FF', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#2B36A8', // 100% 处的颜色
          },
        ],
      ];
      const rich = {
        yellow: {
          color: '#fff',
          fontSize: 12 * scale,
          padding: [5, 0],
          align: 'center',
        },
        total: {
          color: '#ffc72b',
          fontSize: 12 * scale,
          align: 'center',
        },
        white: {
          color: 'rgba(23, 176, 255, 1)',
          align: 'center',
          fontSize: 12 * scale,
          padding: [5, 0],
        },
        blue: {
          color: 'rgba(255, 255, 255, .4)',
          fontSize: 12 * scale,
          align: 'center',
        },
        hr: {
          borderColor: 'rgba(255, 255, 255, .4)',
          width: '110%',
          borderWidth: 1,
          height: 0,
        },
      };
      const seriesData = data.map((item, index) => {
        return {
          value: item.goodsAmount,
          name: item.goodsName,
          itemStyle: {
            borderWidth: 0,
            borderColor: '#182037',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops:
                chartPieColors[
                  index > 8 ? Math.floor(Math.random() * 8 + 1) : index
                ],
              global: false, // 缺省为 false
            },
          },
        };
      });
      return {
        title: {
          text: total,
          show: true,
          subtext: '售卖总数',
          left: '53%',
          top: '40%',
          textAlign: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 30 * scale,
          },
          subtextStyle: {
            fontSize: 13 * scale,
            color: '#fff',
          },
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: false,
          selectedMode: true,
          formatter: function() {
            var total = 0; //各科正确率总和
            data.forEach(function(value, index, array) {
              total += value.goodsAmount;
            });
            return '{total|' + total + '}';
          },
          data: [data[0].goodsName],
          right: 'center',
          top: 'center',
          icon: 'none',
          align: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 12 * scale,
            rich: rich,
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['44%', '64%'],
            center: ['55%', '50%'],
            hoverAnimation: false,
            color: [
              [
                {
                  offset: 0,
                  color: '#59B5FF', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#2263BD', // 100% 处的颜色
                },
              ],
              [
                {
                  offset: 0,
                  color: '#FF9793', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#E7504C', // 100% 处的颜色
                },
              ],
              [
                {
                  offset: 0,
                  color: '#AE60FA', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#6D32C1', // 100% 处的颜色
                },
              ],
              [
                {
                  offset: 0,
                  color: '#EFCE49', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#D79C12', // 100% 处的颜色
                },
              ],
              [
                {
                  offset: 0,
                  color: '#FFB058', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#C56625', // 100% 处的颜色
                },
              ],
              [
                {
                  offset: 0,
                  color: '#4ACC88', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#27A657', // 100% 处的颜色
                },
              ],
            ],
            label: {
              normal: {
                formatter: function(params, ticket, callback) {
                  var total = 0; //考生总数量
                  data.forEach(function(value, index, array) {
                    total += value.goodsAmount;
                  });
                  return (
                    '{white|' +
                    params.name +
                    '}\n{hr|}\n{yellow|' +
                    params.value +
                    '}'
                  );
                },
                rich: rich,
                fontSize: 12 * scale,
              },
            },
            labelLine: {
              normal: {
                length: 20 * scale,
                length2: 0,
                lineStyle: {
                  color: 'rgba(255, 255, 255, .4)',
                },
              },
            },
            data: seriesData,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
